@use '@n8n/design-system/css/mixins' as mixins;

/**
 * Resizer
 */

.vue-flow__resize-control.line {
	border-color: transparent;
	z-index: 1;

	&.top {
		height: var(--spacing--sm);
		border-top-width: var(--spacing--sm);
	}

	&.right {
		width: var(--spacing--sm);
		border-right-width: var(--spacing--sm);
	}

	&.bottom {
		height: var(--spacing--sm);
		border-bottom-width: var(--spacing--sm);
	}

	&.left {
		width: var(--spacing--sm);
		border-left-width: var(--spacing--sm);
	}
}

.vue-flow__resize-control.handle {
	background-color: transparent;
	width: var(--spacing--sm);
	height: var(--spacing--sm);
	border: 0;
	border-radius: 0;
	z-index: 1;
}

/**
 * Minimap
 */

.vue-flow__minimap {
	height: 120px;
	overflow: hidden;
	margin-bottom: calc(48px + 2 * var(--spacing--xs));
	border: var(--border);
	border-radius: var(--radius);
	background: var(--color--background--light-2);

	.minimap-node-default {
		fill: var(--color--foreground--shade-1);
	}

	.minimap-node-n8n-nodes-base-stickyNote {
		fill: var(--color--foreground--shade-1);
		opacity: 0.2;
	}

	@include mixins.breakpoint('xs-only') {
		display: none;
	}
}

/**
 * Nodes
 */

.vue-flow__node {
	&,
	&.draggable {
		cursor: pointer;
	}

	&.dragging {
		cursor: grabbing;
	}

	&:has(.sticky--active) {
		z-index: 1 !important;
	}

	// Bump z-index for unconnected nodes
	&:has(.canvas-handle-plus-wrapper):hover {
		z-index: 2 !important;
	}
}

.vue-flow__nodes:has(.bring-to-front) {
	z-index: 2 !important;
}

/**
 * Handles
 */

.vue-flow__handle {
	&:not(.connectionindicator) .plus {
		display: none;
		position: absolute;
	}
}

/**
 * Selection
 */

.vue-flow__nodesselection-rect {
	box-sizing: content-box;
	margin-top: calc(-1 * var(--spacing--2xs));
	margin-left: calc(-1 * var(--spacing--2xs));
	padding: var(--spacing--2xs);
}

/**
 * Edges
 */

.vue-flow__edges:has(.bring-to-front),
.vue-flow__edge-label.selected {
	z-index: 1 !important;
}

/**
 * Pane
 */

.vue-flow__pane {
	cursor: grab;

	&.selection {
		cursor: default;
	}

	&.dragging {
		cursor: grabbing;
	}
}

/**
 * Controls
 */

.vue-flow__controls {
	margin: var(--spacing--sm);
	display: flex;
	gap: var(--spacing--xs);
	box-shadow: none;

	@include mixins.breakpoint('xs-only') {
		max-width: calc(100% - 3 * var(--spacing--sm) - var(--spacing--2xs));
		overflow: auto;
		margin-left: 0;
		margin-right: 0;
		padding-left: var(--spacing--sm);
		padding-right: var(--spacing--sm);
	}
}
